import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_user_controller.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_app_bar.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_good_widget.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_scaffold.dart';
import 'package:jet_rails/jr_services/jr_services.dart';
import 'package:jet_rails/jr_services/jr_tracking.dart';
import 'package:jet_rails/jr_utils/jr_payment.dart';

class JrCoinShopView extends StatefulWidget {
  const JrCoinShopView({Key? key}) : super(key: key);

  @override
  State<JrCoinShopView> createState() => _JrCoinShopViewState();
}

class _JrCoinShopViewState extends State<JrCoinShopView> {
  @override
  void initState() {
    super.initState();
    JrTracking.click(JrTrackingPages.pagePurchase);
  }

  @override
  Widget build(BuildContext context) {
    return JrScaffold(
        appBar: JrAppBar(
          title: 'Coin Shop',
        ),
        body: Column(
          children: [
            SizedBox(height: 30.h),
            buildMyCoins(),
            SizedBox(height: 30.h),
            Expanded(child: buildGoods()),
          ],
        ));
  }

  Widget buildMyCoins() {
    return Container(
        margin: const EdgeInsets.symmetric(horizontal: 16),
        child: Stack(
          children: [
            Container(
                height: 106.h,
                padding: EdgeInsets.symmetric(horizontal: 32.w, vertical: 22.h),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12.r),
                  color: const Color(0xFF9A68C7),
                ),
                child: Row(
                  children: [
                    Image.asset('assets/webp/icon_coin.webp', height: 60.r),
                    SizedBox(width: 16.w),
                    Expanded(
                        child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('My Coins', style: TextStyle(color: Colors.white, fontSize: 16.sp)),
                        SizedBox(height: 8.h),
                        Obx(() => Text('${JrServices.instance.loginUser.value.availableCoins}',
                            style: TextStyle(color: Colors.white, fontSize: 26.sp, fontWeight: FontWeight.bold))),
                      ],
                    )),
                  ],
                )),
            Positioned(
              right: 0,
              bottom: 0,
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.rotationY(pi),
                child: Image.asset('assets/images/icon_rails.png', height: 80.h),
              ),
            )
          ],
        ));
  }

  buildGoods() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: SingleChildScrollView(
          child: Wrap(
            spacing: 10.w,
            children: Get.find<JrUserController>()
                .goodsList
                .map((e) => GestureDetector(
                      onTap: () {
                        JrPayment().buyTheGood(e);
                      },
                      child: JrGoodWidget(goodModel: e),
                    ))
                .toList(),
          ),
        ));
  }
}
